<template>
  <div class="contant" :class="[skin]">
    <!-- K线图 -->
    <div class="kLine-content">
      <div id="chart_container" class="f-fill" style="height:100%;"></div>
    </div>
    <!-- 合约详情 -->
    <!-- <div class="contract-details">
      <div class="item item-name line-bottom">
        <span>{{ActQuotes.heyue_name}}</span>
        <i-select class="order-select" v-model="nowConCode" @on-change="selectContract"
          :placeholder="$t('trade.selectContract')">
          <i-option v-for="item in contractlist" :value="item.heyue_id" :key="item.heyue_id">{{ item.heyue_name
          }}</i-option>
        </i-select>
      </div> -->
    <div class="contract-details">
      <!-- <div class="item item-name line-bottom">
        <span class="heyue_name">{{ ActQuotes.heyue_name }}</span>
      </div> -->

      <div class="header">
        <span>{{ ActQuotes.heyue_name }}</span>
      </div>
      <div class="progress-bar">
        <div class="progress" :style="{
          width:
            (ActQuotes.sellingVol1 /
              (ActQuotes.sellingVol1 + ActQuotes.buyVol1)) *
            100 +
            '%',
        }"></div>
      </div>
      <div class="top">
        <ul class="top1">
          <li>{{ $t("trade.sell") }}</li>
          <li class="green2">{{ ActQuotes.seller1 }}</li>
          <li class="yellow2">{{ ActQuotes.sellingVol1 }}</li>
        </ul>
      </div>
      <div class="top">
        <ul class="top1">
          <li>{{ $t("trade.buy") }}</li>
          <li class="red2">{{ ActQuotes.buy1 }}</li>
          <li class="yellow2">{{ ActQuotes.buyVol1 }}</li>
        </ul>
      </div>

      <!-- 右边中间 -->
      <div class="center">
        <div class="light">
          <ul class="light1">
            <li>最新</li>
            <li :class="ActQuotes.nowUpw > 0 ? 'red' : 'green'">
              {{ ActQuotes.currentPrice }}
            </li>
          </ul>
          <ul class="light1">
            <li>{{ $t("market.change") }}</li>
            <li :class="ActQuotes.nowUpw > 0 ? 'red' : 'green'">
              {{ ActQuotes.nowUpw }}
            </li>
          </ul>
          <ul class="light1">
            <li>{{ $t("market.range") }}</li>
            <li :class="ActQuotes.nowUpw > 0 ? 'red' : 'green'">
              {{ ActQuotes.nowGain }}%
            </li>
          </ul>
          <ul class="light1">
            <li>总手</li>
            <li class="yellow">{{ ActQuotes.volume }}</li>
          </ul>
          <ul class="light1">
            <li>{{ $t("trade.position") }}</li>
            <li class="yellow">{{ ActQuotes.inventory }}</li>
          </ul>
        </div>
        <div class="right">
          <ul class="right1">
            <li>昨收</li>
            <li>
              {{ ActQuotes.closedYes | formatPrice }}
            </li>
          </ul>
          <ul class="right1">
            <li>{{ $t("market.balance") }}</li>
            <li>{{ ActQuotes.settlementYes | formatPrice }}</li>
          </ul>
          <ul class="right1">
            <li>{{ $t("market.open") }}</li>
            <li :class="ActQuotes.nowUpw > 0 ? 'red' : 'green'">
              {{ ActQuotes.openingToday | formatPrice }}
            </li>
          </ul>
          <ul class="right1">
            <li>{{ $t("market.highest") }}</li>
            <li class="red">{{ ActQuotes.highestPrice | formatPrice }}</li>
          </ul>
          <ul class="right1">
            <li>{{ $t("market.minimum") }}</li>
            <li class="green">
              {{ ActQuotes.lowestPrice | formatPrice }}
            </li>
          </ul>
        </div>
      </div>

      <div class="nav">
        <ul class="nav1">
          <li class="nav2">北京</li>
          <li class="nav3">价格</li>
          <li class="li1">现手</li>
        </ul>
      </div>
      <div class="item1 mingxi">
        <div class="item2" v-for="item1 in mingxi_list">
          <div class="item2-time">
            <span class="timestamp">{{ item1.timestamp1 }}</span>
            <span class="timestamp">{{ item1.timestamp2 }}</span>
          </div>
          <span :class="item1.currentPrice > ActQuotes.settlementYes ? 'red' : 'green'
            ">{{ item1.currentPrice | formatPrice }}</span>
          <span class="volume" :class="item1.color">{{
            item1.transaction
          }}</span>
        </div>
      </div>
      <div class="bottom">
        <div class="rihgt-bottom">笔</div>
        <div class="leight-bottom"></div>
      </div>
    </div>
    <div v-show="isDrags" class="drags-mask"></div>
    <!-- 迷你交易面板 -->
    <vue-draggable-resizable v-if="showMini" :x="dx" :y="dy" :w="340" :h="390" :z="999" :parent="true"
      drag-handle=".drag-handle" :onDragStart="onDragStartCallback" @dragging="onDrag" @dragstop="onDragstop">
      <div class="mini-trade">
        <div class="drag-handle">
          <span class="close-icon" :title="$t('menu.close')" @click="closeMini">
            <svg-icon icon-class="close" />
          </span>
        </div>
        <!-- 迷你交易面板主体 -->
        <div class="content">
          <mini-trade />
        </div>
      </div>
    </vue-draggable-resizable>
    <!-- <div class="item mingxi">
        <div class="grade-head" v-for="item in mingxi_list">
          <span class="timestamp">{{ item.timestamp1 }}</span>
          <span class="pricefall">{{ item.currentPrice }}</span>
          <span class="volume">{{ item.transaction }}</span>
        </div>
      </div>
    </div>
    <div v-show="isDrags" class="drags-mask"></div> -->
    <!-- 迷你交易面板 -->
    <!-- <vue-draggable-resizable v-if="showMini" :x="dx" :y="dy" :w="340" :h="390" :z="999" :parent="true"
      drag-handle=".drag-handle" :onDragStart="onDragStartCallback" @dragging="onDrag" @dragstop="onDragstop">
      <div class="mini-trade">
        <div class="drag-handle">
          <span class="close-icon" :title="$t('menu.close')" @click="closeMini">
            <svg-icon icon-class="close" />
          </span>
        </div> -->
    <!-- 迷你交易面板主体 -->
    <!-- <div class="content">
          <mini-trade />
        </div>
      </div>
    </vue-draggable-resizable> -->
  </div>
</template>

<script>
import { mapGetters } from "vuex";
import { Select, Option } from "iview";
import {
  subscribe,
  clientId,
  wsSend,
  unsubscribe,
} from "./../../request/kdata.js";
import MiniTrade from "./MiniTrade";
import VueDraggableResizable from "vue-draggable-resizable";
import path from "path";
import moment from "moment";
import { getCustomIndicators } from "./custom";
moment.locale("zh-cn");
var updateKLine = {};
let oldsubscribe = [];
let zhibiao_timer = null;
let to = 0;
let from = 0;
let point = 0;
let barTimer = null;
let isLoad = false
let updateonDataCallback = null
let interval = null;
let updateonDataCallbackNum = 0
export default {
  name: "KLine",
  tvWidget: null,
  components: {
    ISelect: Select,
    IOption: Option,
    MiniTrade,
    VueDraggableResizable,
  },
  computed: {
    ...mapGetters([
      "skin", // 主题样式
      "kbars", // K线数据，接口获取
      "lastKLineData",
      "ActQuotes",
      "getKEnd",
      "actcontract", // 当前选中的合约id
      "contractlist", // 所有合约数据列表
      "isWinMax", // 窗口是否最大化
      "showPanel", // 交易面板状态
      "showminiPanel", // 迷你交易面板状态
      "userinfo", // 用户信息
      "history_bars"
    ]),
  },
  data: function () {
    return {
      bars: [], // k线数据
      point: 0, // 当前合约的最小波动
      currency1: "USD",
      currency2: "BTC",
      savedData: null,
      saved_chart: null,
      feed: null,
      change_flag: true, // 合约id改变标记, 默认为true, 当行情变化时判断改变
      change_flag2: true,
      timeframe: ["1"],
      nowConCode: "",
      showMini: false, // 展示mini交易面板
      isDrags: false, // 用户是否拖动了交易面板
      dx: 28,
      dy: 28,
      mingxi_list: [],
    };
  },
  filters: {
    formatPrice(val) {
      let fixed = `${point}`.length - 1;
      if (point * 1 > 0.9) {
        fixed = `${point}`.length - 1;
      } else {
        fixed = `${point}`.split(".")[1].length;
      }
      return (val * 1).toFixed(fixed);
    },
  },
  methods: {
    setMiniXY() {
      let nowW = document.body.clientWidth;
      let nowH = document.body.clientHeight;
      // console.log("当前宽度：", nowW);
      // console.log("当前高度：", nowH);
      this.dx = nowW - 720;
      this.dy = nowH - 450;
      // console.log("当前X：", nowW - 720);
      // console.log("当前Y：", nowH - 420);
    },
    onDrag: function (x, y) {
      this.dx = x;
      this.dy = y;
    },
    onDragStartCallback(ev) {
      // return false; — for cancel
      // console.log(ev)
      // console.log('拖动开始')
      this.isDrags = true;
    },
    onDragstop() {
      // console.log('拖动结束')
      this.isDrags = false;
    },
    closeMini() {
      this.showMini = false;
    },
    selectContract(id) {
      // 选中合约处理
      this.$store.commit("product/SET_ACTCONTRACT", id);
    },
    changePair() {
      let that = this;
      try {
        this.feed._fireEvent("pair_change");

        // this.tvWidget
        //   .activeChart()
        //   .setSymbol(this.currency1 + ":" + this.currency2, () => {
        //     console.log(
        //       "GOWNO :: proba zmiany",
        //       that.currency1,
        //       that.currency2
        //     );
        //   });
        // setTimeout(() => {
        //   this.change_flag2 = true;
        // }, 10);
      } catch (e) { }
    },
    // 获取K线数据
    getKdata(val, time) {
      interval = val
      this.$store.commit("product/SET_GETKDATAEnd", 0);
      // 当前val为K线类型
      // this.$store.dispatch("product/updateKLines", val).then(res => {
      //   this.$store.commit("product/SET_GETKDATAEnd", res); // 标记获取成功
      // });
      let heyue_bh = "";
      for (let item in this.contractlist) {
        if (this.contractlist[item].heyue_id == this.actcontract) {
          heyue_bh = this.contractlist[item].heyue_bh;
        }
      }
      if (oldsubscribe.length) {
        unsubscribe(oldsubscribe[0]);
        unsubscribe(oldsubscribe[1]);
      }
      wsSend(`40;${heyue_bh};${val};${clientId};`);
      subscribe(`kxian/${clientId}/+/+`);
      subscribe(`kxian/current/${heyue_bh}/${time}`);
      oldsubscribe[0] = `kxian/${clientId}/${heyue_bh}/${time}`;
      oldsubscribe[1] = `kxian/current/${heyue_bh}/${time}`;
    },
    // 创建K线图实例
    createFeed() {
      let that = this;
      let Datafeed = {};

      Datafeed.DataPulseUpdater = function (datafeed, updateFrequency) {
        var daThat = this;
        this._datafeed = datafeed;
        this._subscribers = {};

        this._requestsPending = 0;

        var update = function () {
          if (daThat._requestsPending > 0) {
            return;
          }

          for (var listenerGUID in daThat._subscribers) {
            var subscriptionRecord = daThat._subscribers[listenerGUID];
            var resolution = subscriptionRecord.resolution;

            var datesRangeRight = parseInt(new Date().valueOf() / 1000);

            //	BEWARE: please note we really need 2 bars, not the only last one
            //	see the explanation below. `10` is the `large enough` value to work around holidays
            var datesRangeLeft =
              datesRangeRight - daThat.periodLengthSeconds(resolution, 10);

            daThat._requestsPending++;

            (function (_subscriptionRecord) {
              // eslint-disable-line
              daThat._datafeed.getBars(
                _subscriptionRecord.symbolInfo,
                resolution,
                datesRangeLeft,
                datesRangeRight,
                function (bars) {
                  daThat._requestsPending--;

                  //	means the subscription was cancelled while waiting for data
                  // 表示订阅在等待数据时被取消
                  if (!daThat._subscribers.hasOwnProperty(listenerGUID)) {
                    return;
                  }

                  if (bars.length === 0) {
                    return;
                  }

                  var lastBar = bars[bars.length - 1];
                  if (
                    !isNaN(_subscriptionRecord.lastBarTime) &&
                    lastBar.time < _subscriptionRecord.lastBarTime
                  ) {
                    return;
                  }

                  var subscribers = _subscriptionRecord.listeners;

                  //	BEWARE: this one isn't working when first update comes and this update makes a new bar. In this case
                  //	_subscriptionRecord.lastBarTime = NaN
                  // 当第一次更新到来并且此更新创建一个新栏时，这个不起作用。 在这个case_subscriptionRecord.lastBarTime = NaN
                  var isNewBar =
                    !isNaN(_subscriptionRecord.lastBarTime) &&
                    lastBar.time > _subscriptionRecord.lastBarTime;

                  //	Pulse updating may miss some trades data (ie, if pulse period = 10 secods and new bar is started 5 seconds later after the last update, the
                  //	old bar's last 5 seconds trades will be lost). Thus, at fist we should broadcast old bar updates when it's ready.
                  // 脉冲更新可能会丢失一些事务数据（即，如果脉冲周期= 10秒并且新列在最后一次更新后5秒开始，则旧列的最后5秒将丢失）。 因此，我们应该在准备就绪时播放旧的条形更新。
                  if (isNewBar) {
                    if (bars.length < 2) {
                      throw new Error(
                        "Not enough bars in history for proper pulse update. Need at least 2."
                      );
                    }

                    var previousBar = bars[bars.length - 2];
                    for (var i = 0; i < subscribers.length; ++i) {
                      subscribers[i](previousBar);
                    }
                  }

                  _subscriptionRecord.lastBarTime = lastBar.time;

                  for (var i = 0; i < subscribers.length; ++i) {
                    subscribers[i](lastBar);
                  }
                },

                //	on error
                function () {
                  daThat._requestsPending--;
                }
              );
            })(subscriptionRecord);
          }
        };

        if (typeof updateFrequency != "undefined" && updateFrequency > 0) {
          setInterval(update, updateFrequency);
        }
      };

      Datafeed.DataPulseUpdater.prototype.periodLengthSeconds = function (
        resolution,
        requiredPeriodsCount
      ) {
        var daysCount = 0;

        if (resolution === "D") {
          daysCount = requiredPeriodsCount;
        } else if (resolution === "M") {
          daysCount = 31 * requiredPeriodsCount;
        } else if (resolution === "W") {
          daysCount = 7 * requiredPeriodsCount;
        } else {
          daysCount = (requiredPeriodsCount * resolution) / (24 * 60);
        }

        return daysCount * 24 * 60 * 60;
      };

      Datafeed.DataPulseUpdater.prototype.subscribeDataListener = function (
        symbolInfo,
        resolution,
        newDataCallback,
        listenerGUID
      ) {
        this._datafeed._logMessage("Subscribing " + listenerGUID);

        if (!this._subscribers.hasOwnProperty(listenerGUID)) {
          this._subscribers[listenerGUID] = {
            symbolInfo: symbolInfo,
            resolution: resolution,
            lastBarTime: NaN,
            listeners: [],
          };
        }

        this._subscribers[listenerGUID].listeners.push(newDataCallback);
      };

      Datafeed.DataPulseUpdater.prototype.unsubscribeDataListener = function (
        listenerGUID
      ) {
        this._datafeed._logMessage("Unsubscribing " + listenerGUID);
        delete this._subscribers[listenerGUID];
      };

      Datafeed.Container = function (updateFrequency) {
        this._configuration = {
          supports_search: false,
          supports_group_request: false,
          supported_resolutions: [
            "1",
            "3",
            "5",
            "15",
            "30",
            "60",
            "120",
            "240",
            "D",
          ],
          supports_marks: false,
          supports_timescale_marks: false,
          exchanges: ["yg"],
        };

        this._barsPulseUpdater = new Datafeed.DataPulseUpdater(
          this,
          updateFrequency || 10 * 1000
        );
        // this._quotesPulseUpdater = new Datafeed.QuotesPulseUpdater(this);

        this._enableLogging = true;
        this._callbacks = {};

        this._initializationFinished = true;
        this._fireEvent("initialized");
        this._fireEvent("configuration_ready");
      };

      Datafeed.Container.prototype._fireEvent = function (event, argument) {
        if (this._callbacks.hasOwnProperty(event)) {
          var callbacksChain = this._callbacks[event];
          for (var i = 0; i < callbacksChain.length; ++i) {
            callbacksChain[i](argument);
          }

          this._callbacks[event] = [];
        }
      };

      Datafeed.Container.prototype._logMessage = function (message) {
        if (this._enableLogging) {
          var now = new Date();
          console.log(
            "CHART LOGS: " +
            now.toLocaleTimeString() +
            "." +
            now.getMilliseconds() +
            "> " +
            message
          );
        }
      };

      Datafeed.Container.prototype.on = function (event, callback) {
        if (!this._callbacks.hasOwnProperty(event)) {
          this._callbacks[event] = [];
        }

        this._callbacks[event].push(callback);
        return this;
      };

      Datafeed.Container.prototype.onReady = function (callback) {
        let reThat = this;
        if (this._configuration) {
          setTimeout(function () {
            callback(reThat._configuration);
          }, 0);
        } else {
          this.on("configuration_ready", function () {
            callback(reThat._configuration);
          });
        }
      };

      Datafeed.Container.prototype.resolveSymbol = function (
        symbolName,
        onSymbolResolvedCallback,
        onResolveErrorCallback
      ) {
        this._logMessage("GOWNO :: resolve symbol " + symbolName);
        Promise.resolve().then(() => {
          function adjustScale() {
            let nowPoint = that.point;
            let point = Number(nowPoint).toString();
            if (point.indexOf(".") == -1) {
              return 10;
            } else {
              return Math.pow(10, nowPoint.toString().split(".")[1].length);
            }
          }

          this._logMessage(
            "GOWNO :: onResultReady inject " +
            that.currency1 +
            ":" +
            that.currency2
          );

          onSymbolResolvedCallback({
            name: that.ActQuotes.heyue_name,
            timezone: "Asia/Shanghai",
            pricescale: adjustScale(),
            minmov: 1,
            minmov2: 0,
            ticker: that.ActQuotes.heyue_name,
            description: "",
            session: "24x7",
            type: "stock",
            "exchange-traded": "",
            "exchange-listed": "",
            has_intraday: true,
            intraday_multipliers: that.timeframe, //It is an array containing intraday resolutions (in minutes) the datafeed wants to build by itself. E.g., if the datafeed reported he supports resolutions ["1", "5", "15"], but in fact it has only 1 minute bars for symbol X, it should set intraday_multipliers of X = [1]. This will make Charting Library to build 5 and 15 resolutions by itself.
            has_weekly_and_monthly: true,
            has_no_volume: false,
            regular_session: "24x7",
          });
        });
      };

      Datafeed.Container.prototype.getBars = function (
        symbolInfo,
        resolution,
        rangeDate,
        onDataCallback,
        onErrorCallback
      ) {
        console.log(rangeDate);
        if (to == 0) {
          to = rangeDate.to;
          from = rangeDate.from;
        }
        // if(isLoad){
        //   onDataCallback([], { noData: true });
        //   return
        // }
        console.log("getBars");
        updateonDataCallbackNum++
        updateonDataCallback = onDataCallback;
        if (that.bars && that.bars.length > 0 && isLoad) {
          let heyue_bh = "";
          for (let item in that.contractlist) {
            if (that.contractlist[item].heyue_id == that.actcontract) {
              heyue_bh = that.contractlist[item].heyue_bh;
            }
          }
          console.log(`40;${heyue_bh};${interval};${clientId};${rangeDate.to};`);
          wsSend(`40;${heyue_bh};${interval};${clientId};${rangeDate.to};`);
        }
        clearInterval(barTimer);
        barTimer = setInterval(() => {
          if (that.bars && that.bars.length > 0) {
            if (!isLoad) {
              isLoad = true
              // console.log(that.bars);
              onDataCallback(that.bars, { noData: false });
              clearInterval(barTimer);
            } else {
              // onDataCallback([], { noData: true });
              // let heyue_bh = "";
              // for (let item in that.contractlist) {
              //   if (that.contractlist[item].heyue_id == that.actcontract) {
              //     heyue_bh = that.contractlist[item].heyue_bh;
              //   }
              // }
              // wsSend(`40;${heyue_bh};${that.timeframe[0]};${clientId};${rangeDate.to}`);
              // console.log("noData");
              // onDataCallback([], { noData: true });
            }
          }
        }, 10);

        // onDataCallback([], { noData: true });
        //onDataCallback(bars, { noData: true , nextTime: data.nb || data.nextTime });
      };

      Datafeed.Container.prototype.subscribeBars = function (
        symbolInfo,
        resolution,
        onRealtimeCallback,
        listenerGUID,
        onResetCacheNeededCallback
      ) {
        // onResetCacheNeededCallback();
        // that.bars.forEach(function(bar) {
        //   onRealtimeCallback(bar);
        // });
        updateKLine.fn = onRealtimeCallback;
        console.log(2123123123123);
        this.on("pair_change", function () {
          console.log("pair_change");
          // onResetCacheNeededCallback();
          // this.tvWidget.activeChart().resetData();
        });
      };

      Datafeed.Container.prototype.unsubscribeBars = function (listenerGUID) {
        this._barsPulseUpdater.unsubscribeDataListener(listenerGUID);
      };

      return new Datafeed.Container();
    },
  },
  watch: {
    history_bars: {
      handler(newVal, oldVal) {
        console.log(updateonDataCallback);
        if (newVal.length === 0) {
          updateonDataCallbackNum--
          updateonDataCallback([], { noData: true });
          return
        }
        updateonDataCallbackNum--
        updateonDataCallback(newVal, { noData: true });
      },
    },
    ActQuotes(newVal, oldVal) {
      if (oldVal.timestamp == newVal.timestamp) return;
      const randomBoolean = () => Math.random() >= 0.5;
      if (!newVal) return;
      if (newVal.length === 0) return;
      let temp = newVal;
      let len = this.mingxi_list.length;
      let last_time = 0;
      if (len > 0) {
        last_time = this.mingxi_list[len - 1].timestamp;
      }

      if (this.mingxi_list.length >= 30) {
        this.mingxi_list.shift();
      }
      let date = new Date(last_time * 1000);
      let date1 = new Date(temp.timestamp * 1000);

      if (date.getMinutes() != date1.getMinutes()) {
        if (date1.getHours() < 10)
          temp.timestamp1 = "0" + date1.getHours().toString();
        else temp.timestamp1 = date1.getHours().toString();
        if (date1.getMinutes() < 10)
          temp.timestamp2 = ":0" + date1.getMinutes();
        else temp.timestamp2 = ":" + date1.getMinutes();
      } else {
        temp.timestamp1 = "";
        if (date1.getSeconds() < 10)
          temp.timestamp2 = ":0" + date1.getSeconds();
        else temp.timestamp2 = ":" + date1.getSeconds();
      }

      temp.color = randomBoolean() ? "red" : "green";

      this.mingxi_list.push(temp);
    },
    kbars: {
      handler(newVal) {
        // 将当前ajax请求到的历史数据填入
        if (!newVal) return;
        if (newVal.length === 0) return;
        // 深拷贝，防止在外部影响store的数据
        let newList = newVal.map((v) => {
          let nowObj = {
            ...v,
          };
          return nowObj;
        });
        this.bars.length = 0;
        this.bars = newList;
      },
      immediate: true,
    },
    showPanel: {
      handler(newVal) {
        let _this = this;
        // 当交易面板控制值不为undefined,且为true时，初始化迷你交易面板的坐标值。
        if (newVal !== undefined && newVal === true) {
          this.setMiniXY();
        }
        // 根据当前状态判断迷你交易面板的显示与否
        if (!newVal && this.userinfo !== null && _this.showminiPanel) {
          _this.showMini = true;
          window.setTimeout(() => {
            _this.showMini = true;
            _this.setMiniXY();
          }, 0);
          return;
        }
        _this.showMini = false;
      },
      immediate: true,
    },
    lastKLineData: function (data) {
      if (!this.getKEnd) return;
      console.log(data);
      try {
        updateKLine.fn(data);
      } catch (e) { }
    },
    actcontract: {
      handler(newVal, oldVal) {
        // 合约id变化时
        let that = this;
        if (newVal === undefined) {
          return;
        }
        // this.currency1 = "" + newVal;
        // this.currency2 = "" + oldVal;
        // this.change_flag = true;
        // 初始化当前select的值
        this.nowConCode = newVal;

        // 合约一旦变化，就更新最小波动
        for (const item of this.$store.getters.contractlist) {
          if (item.heyue_id === newVal) {
            // console.log("当前合约名称： " + item.Name);
            // console.log("当前合约最小波动： " + item.Minimum);
            that.point = (item.heyue_bodong * 1).toString();
            point = that.point;
          }
        }

        if (newVal !== oldVal) {
          this.getKdata(0, "1min");
        }
      },
      immediate: true,
    },
    $route: function (to, from) {
      if (to.path == "/home") {
        // console.log('进入home页面')
        this.$store.commit("product/SET_BARS", []);
        this.bars.length = 0;
        // this.changePair();
      }
    },
    bars: function (newVal, oldVal) {
      // console.log(newVal)
      if (this.change_flag) {
        this.change_flag2 = false;
        // this.changePair();
      }
      this.$store.commit("product/SET_GETKDATAEnd", 1);
    },
    isWinMax(newVal) {
      this.$store.dispatch("panel/isShowMiniPanel", false);
      // 监听用户是否进行向下还原/最大化操作，每次操作后对迷你窗口进行初始化。
      /*
        let that = this;
        if (newVal === undefined) {
          return;
        }
        this.showMini = false;
        // 在任务队列后立即执行
        window.setTimeout(() => {
          that.showMini = true;
          that.setMiniXY();
        }, 0);
      */
    },
    showMini(val) {
      // 如果迷你交易面板关闭，复位迷你面板loading状态。
      if (!val) {
        this.$store.commit("product/SET_MINILOADING", false);
      }
    },
  },
  beforeMount() {
    this.setMiniXY();
    this.mingxi_list = [];
  },
  mounted() {
    const that = this;
    this.feed = this.createFeed();
    // 初始化主题样式
    let skinObj = {
      backgroundColor: "#000000", // loading加载背景色
      foregroundColor: "#000000", // loading颜色
      toolbar_bg: "#000000", // 操作条背景色
      background: "#000000", // K线图背景色
    };

    if (this.skin === "skin-light") {
      skinObj = {
        backgroundColor: "#000000", // loading加载背景色
        foregroundColor: "#000000", // loading颜色
        toolbar_bg: "#000000", // 操作条背景色
        background: "#000000", // K线图背景色
      };
    }

    var tvStudy = function (theme) {
      let color = { colorUp: "#ff3c39", colorDown: "#00ffff" };
      var themes = {
        night: {
          volume1: color.colorDown,
          volume2: color.colorUp,
          volTransparency: 85,
        },
        day: {
          volume1: color.colorUp,
          volume2: color.colorDown,
          volTransparency: 85,
        },
      };
      var t = themes[theme];
      return {
        "volume.volume.transparency": t["volTransparency"],
        "moving average exponential.length": 2,
        "volume.volume.color.0": t["volume1"],
        "volume.volume.color.1": t["volume2"],
      };
    };
    var getOverrides = function (theme) {
      let color = { colorUp: "#ff3c39", colorDown: "#00ffff" };
      var themes = {
        night: {
          background: "#000000",
          netHorz: "#000000",//水平网格线
          netVert: "#000000",
          scalesLine: "#ffffff",
          scalesText: "#ffffff",
          candleUp: color.colorUp,
          candleDown: color.colorDown,
        },
        day: {
          background: "#ffffff",
          netHorz: "#fbfbfc",
          netVert: "#fbfbfc",
          scalesLine: "#86899a",
          scalesText: "#86899a",
          candleUp: color.colorDown,
          candleDown: color.colorUp,
        },
      };

      var t = themes[theme];
      console.log('tttttttttttttttttt', t)
      return {
        "paneProperties.legendProperties.showStudyArguments": true,
        "paneProperties.legendProperties.showStudyTitles": true,
        //"paneProperties.legendProperties.showStudyValues": false,
        "paneProperties.legendProperties.showSeriesTitle": false,
        "paneProperties.legendProperties.showSeriesOHLC": true,
        "paneProperties.legendProperties.showLegend": false,
        //网格线
        "paneProperties.vertGridProperties.color": t["netVert"],
        "paneProperties.horzGridProperties.color": t["netHorz"],
        "paneProperties.horzGridProperties.style": 1,
        "paneProperties.horzGridProperties.transparency": 50,
        "scalesProperties.lineColor": t["scalesLine"],
        "scalesProperties.textColor": t["scalesText"],
        "scalesProperties.fontSize": 11,
        "scalesProperties.scaleSeriesOnly": false,
        "scalesProperties.showSeriesLastValue": true,
        "scalesProperties.showSeriesPrevCloseValue": false,
        "scalesProperties.showStudyLastValue": false,
        "scalesProperties.showStudyPlotLabels": false,
        "scalesProperties.showSymbolLabels": false,
        "scalesProperties.showCurrency": true,
        "scalesProperties.showUnit": true,
        "paneProperties.background": t["background"],
        "mainSeriesProperties.style": 9,
        "mainSeriesProperties.lineStyle.color": "#ffffff",
        "mainSeriesProperties.candleStyle.upColor": t["candleUp"],
        "mainSeriesProperties.candleStyle.downColor": t["candleDown"],
        "mainSeriesProperties.candleStyle.borderUpColor": t["candleUp"],
        "mainSeriesProperties.candleStyle.borderDownColor": t["candleDown"],
        // 蜡烛中心的线
        "mainSeriesProperties.candleStyle.wickUpColor": t["candleUp"],
        "mainSeriesProperties.candleStyle.wickDownColor": t["candleDown"],
        // 空心k线
        "mainSeriesProperties.hollowCandleStyle.drawBorder": false,
        "mainSeriesProperties.hollowCandleStyle.upColor": t["candleUp"],
        "mainSeriesProperties.hollowCandleStyle.downColor": t["candleDown"],
        "mainSeriesProperties.hollowCandleStyle.borderUpColor": t["candleUp"],
        "mainSeriesProperties.hollowCandleStyle.borderDownColor":
          t["candleDown"],
        // 蜡烛中心的线
        "mainSeriesProperties.hollowCandleStyle.wickUpColor": t["candleUp"],
        "mainSeriesProperties.hollowCandleStyle.wickDownColor": t["candleDown"],
        // 成交量高度
        volumePaneSize: "medium",
        "paneProperties.legendProperties.showOnlyPriceSource": false,
      };
    };
    const widgetOptions = {
      // theme: "Dark",
      fullscreen: false, // 布尔值显示图表是否占用窗口中所有可用的空间。
      autosize: true,
      symbol: this.ActQuotes.heyue_name || "BTC", // 商品 固定格式为 “EXCHANGE:SYMBOL” 即 交易所：商品
      container_id: "chart_container", // `id`属性为指定要包含widget的DOM元素id。
      datafeed: that.feed,
      library_path: path.join(__static, "/custom_scripts/charting_library/"), // 插件存放位置,即charting_library.min.js所在位置
      locale: "zh", // 语言
      timezone: "Asia/Shanghai",
      charts_storage_api_version: "1.1", //后台版本"1.0"|"1.1"
      client_id: "tradingview.com",
      user_id: "public_user_id",
      debug: false,
      interval: "1", //默认显示规则
      timeframe: '5h',//todo: na koncu
      // saved_data: that.savedData,
      // allow_symbol_change: true,
      // time_frames: [
      //   { text: "1y", resolution: "1W" },
      //   { text: "6m", resolution: "3D" },
      //   { text: "3m", resolution: "1D" },
      //   { text: "1m", resolution: "1D" },
      //   { text: "1w", resolution: "30" },
      //   { text: "3d", resolution: "30" },
      //   { text: "1d", resolution: "30" },
      //   { text: "6h", resolution: "15" },
      //   { text: "1h", resolution: "1" },
      // ],
      // drawings_access: {
      //   type: "black",
      //   // tools: [{name: "Regression Trend"}]//todo: moje
      //   tools: [
      //     { name: "Trend Line", grayed: true },
      //     { name: "Trend Angle", grayed: true },
      //   ], //todo: bb
      // }, // black为黑名单,禁用name为Regression Trend的tool
      disabled_features: [
        "header_symbol_search",
        "header_interval_dialog_button",
        "show_interval_dialog_on_key_press",
        "symbol_search_hot_key",
        "study_dialog_search_control",
        "display_market_status",
        "header_compare",
        "symbol_info",
        "border_around_the_chart",
        "main_series_scale_menu",
        "star_some_intervals_by_default",
        "datasource_copypaste",
        "right_bar_stays_on_scroll",
        "context_menus",
        "go_to_date",
        "compare_symbol",
        "border_around_the_chart",
        "timezone_menu",
        "remove_library_container_border",
        "volume_force_overlay",
        "header_screenshot", // 照相机
        "header_fullscreen_button", // 全屏
        // "use_localstorage_for_settings",
        "timeframes_toolbar",
        // "left_toolbar",
        // "shift_visible_range_on_new_bar",
      ],
      enabled_features: [
        "hide_last_na_study_output",
        // "dont_show_boolean_study_arguments",
        "use_localstorage_for_settings",
        // "remove_library_container_border",
        // "save_chart_properties_to_local_storage",
        // "side_toolbar_in_fullscreen_mode",
        // "hide_last_na_study_output",
        // "constraint_dialogs_movement",
        // "hide_left_toolbar_by_default",
        // "disable_resolution_rebuild"
      ], // 上面分别为启用禁用图表上的一些功能,下方连接查看图表功能
      studies_overrides: {
        "volume.volume.color.0": "#00ffff",
        "volume.volume.color.1": "#ff3c39",
        "volume.volume.transparency": 25,
        "volume.volume ma.visible": true,
        "volume.volume ma.color": "#ffff00",
        "volume.volume ma.color.1": "#ffff00",
        "volume.volume ma.transparency": 0,
        "volume.volume ma.linewidth": 1,
      },
      custom_css_url: path.join(
        __static,
        "/custom_scripts/charting_library/chart.css"
      ), // 自定义css存放位置,以library_path为目录
      loading_screen: {
        backgroundColor: skinObj.backgroundColor,
        foregroundColor: skinObj.foregroundColor,
      }, // 加载图表时loading的样式
      toolbar_bg: skinObj.toolbar_bg, // 操作条背景色
      overrides: getOverrides("night"), // 图表背景等样式重载（即修改样式
      // custom_indicators_getter: getCustomIndicators,
    };

    const tvWidget = (window.tvWidget = new TradingView.widget(widgetOptions));
    this.tvWidget = tvWidget;
    this.tvWidget.onChartReady(function () {
      tvWidget
        .activeChart()
        .setVisibleRange(
          { from: Date.now() / 1000 - 301 * 60, to: Date.now() / 1000 },
          { percentRightMargin: 0 }
        )
        .then(() => console.log("New visible range is applied"));

      //初始化指标
      // that.tvWidget
      //   .activeChart()
      //   .createStudy(
      //     "Moving Average",
      //     false,
      //     false,
      //     ["", 10, "close", 0, "SMA", 9],
      //     {
      //       "Plot.color": "#ffff00",
      //       "Plot.linewidth": 1,
      //     }
      //   );
      // that.tvWidget
      //   .activeChart()
      //   .createStudy(
      //     "Moving Average",
      //     false,
      //     false,
      //     [5, 5, "close", 0, "SMA", 9],
      //     {
      //       "Plot.color.0": "#fcfcfc",
      //     }
      //   );
      // that.tvWidget
      //   .activeChart()
      //   .createStudy(
      //     "Moving Average",
      //     false,
      //     false,
      //     [20, 20, "close", 0, "SMA", 9],
      //     {
      //       "Plot.color": "#ff00ff",
      //       "Plot.linewidth": 1,
      //     }
      //   );
      // that.tvWidget
      //   .activeChart()
      //   .createStudy(
      //     "Moving Average",
      //     false,
      //     false,
      //     [40, 40, "close", 0, "SMA", 9],
      //     {
      //       "Plot.color": "#00ff00",
      //       "Plot.linewidth": 1,
      //     }
      //   );
      // that.tvWidget
      //   .activeChart()
      //   .createStudy(
      //     "Moving Average",
      //     false,
      //     false,
      //     [60, 60, "close", 0, "SMA", 9],
      //     {
      //       "Plot.color": "#8080ff",
      //       "Plot.linewidth": 1,
      //     }
      //   );

      // that.tvWidget
      //   .activeChart()
      //   .createStudy("MACD", false, false, [14, 30, "close", 9], {
      //     "MACD.color.0": "#FFFFFF",
      //     "Signal.color.0": "#e1e243",
      //     "Plot.linewidth": 1,
      //     "Histogram.color.0": "#FF5252",
      //     "Histogram.color.1": "#FCCBCD",
      //     "Histogram.color.2": "#ACE5DC",
      //     "Histogram.color.3": "#22AB94",
      //   });

      // that.tvWidget.applyOverrides(getOverrides("night"));

      let tv_zhibiao = [];
      try {
        tv_zhibiao = JSON.parse(localStorage.getItem("tv_zhibiao")) || [];
      } catch (e) {
        tv_zhibiao = [];
      }
      for (let i = 0; i < tv_zhibiao.length; i++) {
        that.tvWidget.activeChart().createStudy(tv_zhibiao[i].name);
      }

      zhibiao_timer = setInterval(() => {
        let temp_zhibiao = that.tvWidget.activeChart().getAllStudies();

        let result = temp_zhibiao.filter(
          (item) =>
            item.name != "Moving Average" &&
            item.name != "MACD" &&
            item.name != "Volume" &&
            item.name != "KDJ"
        );

        localStorage.setItem("tv_zhibiao", JSON.stringify(result));
      }, 100);

      that.tvWidget
        .chart()
        .onIntervalChanged()
        .subscribe(null, (interval, obj) => {
          if (updateonDataCallbackNum > 0) {
            for (let i = 0; i < updateonDataCallbackNum; i++) {
              updateonDataCallback([], { noData: true });
            }
          }
          that.timeframe[0] = interval;
          isLoad = false
          that.bars = []
          console.log("时间线变化：", interval);
          that.changePair()
          switch (interval) {
            case "1":
              that.getKdata(0, "1min");
              break;
            case "3":
              that.getKdata(1, "3min");
              break;
            case "5":
              that.getKdata(2, "5min");
              break;
            case "15":
              that.getKdata(3, "15min");
              break;
            case "30":
              that.getKdata(4, "30min");
              break;
            case "60":
              that.getKdata(5, "1hour");
              break;
            case "120":
              that.getKdata(6, "2hour");
              break;
            case "240":
              that.getKdata(7, "4hour");
              break;
            case "1440":
              that.getKdata(8, "1day");
              break;
            case "1D":
              that.getKdata(8, "1day");
              break;
            case "D":
              that.getKdata(8, "1day");
              break;
          }
        });

      // 隐藏，显示，移动，移除或单击绘图。 回调函数接收2个参数: 指标id和event类型。event类型的可能值是hide，show、move、remove、click
      // that.tvWidget.subscribe("onAutoSaveNeeded", () => {
      //   that.$nextTick(function() {
      //     console.log("对指标进行操作ddd的回调2：");
      //     let temp_zhibiao = that.tvWidget.activeChart().getAllStudies();
      //     temp_zhibiao.map((item) => {
      //       let stt = that.tvWidget.activeChart().getStudyById(item.id);
      //       item.input = stt.getInputValues();
      //     });

      //     //that.$store.commit("user/SET_ZHIBIAO", JSON.stringify(temp_zhibiao));
      //     localStorage.setItem("zhibiao", JSON.stringify(temp_zhibiao));
      //   });
      // });

      // that.tvWidget.subscribe("study", (...arr) => {
      //   console.log("将指标添加进图表中：", arr);
      //   console.log(that.tvWidget, ...arr);
      // });

      that.tvWidget
        .activeChart()
        .onChartTypeChanged()
        .subscribe(null, (chartType) => {
          if (chartType == 9) {
            that.tvWidget.activeChart().removeAllStudies();
            that.tvWidget
              .activeChart()
              .createStudy(
                "Moving Average",
                false,
                false,
                ["", 10, "close", 0, "SMA", 9],
                {
                  "Plot.color": "#ffff00",
                  "Plot.linewidth": 1,
                }
              );
            that.tvWidget
              .activeChart()
              .createStudy(
                "Moving Average",
                false,
                false,
                [5, 5, "close", 0, "SMA", 9],
                {
                  "Plot.color.0": "#fcfcfc",
                }
              );
            that.tvWidget
              .activeChart()
              .createStudy(
                "Moving Average",
                false,
                false,
                [20, 20, "close", 0, "SMA", 9],
                {
                  "Plot.color": "#ff00ff",
                  "Plot.linewidth": 1,
                }
              );
            that.tvWidget
              .activeChart()
              .createStudy(
                "Moving Average",
                false,
                false,
                [40, 40, "close", 0, "SMA", 9],
                {
                  "Plot.color": "#00ff00",
                  "Plot.linewidth": 1,
                }
              );
            that.tvWidget
              .activeChart()
              .createStudy(
                "Moving Average",
                false,
                false,
                [60, 60, "close", 0, "SMA", 9],
                {
                  "Plot.color": "#8080ff",
                  "Plot.linewidth": 1,
                }
              );
            that.tvWidget.activeChart().createStudy("Volume");
            that.tvWidget
              .activeChart()
              .createStudy("MACD", false, false, [14, 30, "close", 9], {
                "MACD.color.0": "#FFFFFF",
                "Signal.color.0": "#e1e243",
                "Plot.linewidth": 1,
                "Histogram.color.0": "#FF5252",
                "Histogram.color.1": "#FCCBCD",
                "Histogram.color.2": "#ACE5DC",
                "Histogram.color.3": "#22AB94",
              });
          } else if (chartType == 2) {
            that.tvWidget.activeChart().removeAllStudies();
            that.tvWidget
              .activeChart()
              .createStudy(
                "Moving Average",
                false,
                false,
                ["", 10, "close", 0, "SMA", 9],
                {
                  "Plot.color": "#ffff00",
                  "Plot.linewidth": 1,
                }
              );
            that.tvWidget.activeChart().createStudy("Volume");
          }
        });
      // 指标从图表中删除。回调函数接收2个参数: 指标id和event类型 (当前这个参数唯一可能的值是remove)
      // that.tvWidget.subscribe("study_event", (...arr) => {
      //   console.log('对指标进行操作的回调1：', arr)
      // });
      // 隐藏，显示，移动，移除或单击绘图。 回调函数接收2个参数: 指标id和event类型。event类型的可能值是hide，show、move、remove、click
      // that.tvWidget.subscribe("drawing_show", (...arr) => {
      //   console.log('对指标进行操作的回调2：', arr)
      // });
    });
  },
  destroyed() {
    isLoad = false
    clearInterval(barTimer);
    clearInterval(zhibiao_timer);
    if (oldsubscribe.length) {
      unsubscribe(oldsubscribe[0]);
      unsubscribe(oldsubscribe[1]);
    }
    this.$store.commit("product/SET_BARS", []);
    this.bars.length = 0;
    // this.changePair();
  },
};
</script>

<style lang="scss">
.contant {
  .contract-details {
    width: 100%;

    .header {
      width: 100%;
      display: flex;
      height: 30px;
      /* border-bottom: 1px solid red; */

      span {
        width: 100%;
        display: flex;
        color: yellow;
        font-size: 14px;
        font-weight: 300;
        letter-spacing: 2px;
        justify-content: center;
        align-items: center;
      }
    }

    .progress-bar {
      width: 100%;
      height: 5px;
      background-color: red;
      display: flex;
      justify-content: flex-end;

      .progress {
        margin-top: 1px;
        height: 3px;
        background-color: #06f506;
      }
    }

    .item {
      .heyue_name {
        color: #ffff00;
        padding-left: 70px;
        width: 100%;
      }

      .order-select.ivu-select {
        color: #ffff00;
        font-size: 16px;

        .ivu-select-selection {
          width: 500px;
          background-color: transparent;
          border: none;
          box-shadow: none;

          .ivu-select-selected-value {
            font-size: 16px;
            padding-left: 0;
          }

          .ivu-select-arrow {
            top: 15px;
            right: 2px;
            font-size: 20px;
            z-index: 6;
          }

          &::after {
            position: absolute;
            content: "";
            width: 20px;
            height: 20px;
            top: 5px;
            right: 2px;
            z-index: 1;
            background-color: #fff;
          }
        }
      }
    }
  }

  &.skin-light {
    .contract-details {
      .item {
        .order-select.ivu-select {
          color: #999999;

          .ivu-select-selection {
            &::after {
              background-color: rgba(170, 170, 170, 1);
            }
          }
        }
      }
    }
  }
}
</style>

<style lang="scss" scoped>
.green {
  color: rgb(5, 246, 5);
}

.yellow {
  color: yellow;
}

.red {
  color: red;
}

.contant {
  width: 100%;
  height: 100%;
  display: flex;
  flex-wrap: nowrap;
  background-color: #000000;
  position: relative;

  li {
    list-style-type: none;
  }

  .drags-mask {
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: transparent;
    z-index: 20;
  }

  // 迷你交易面板
  .mini-trade {
    width: 100%;
    height: 100%;
    background-color: rgb(242, 242, 242);
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;

    .drag-handle {
      height: 28px;
      background-color: rgb(215, 215, 215);
      display: flex;
      flex-direction: row-reverse;
      align-items: center;
      cursor: move;

      .close-icon {
        font-size: 16px;
        padding: 6px;
        line-height: 1.2;
        cursor: pointer;
      }
    }

    .content {
      flex: 1;
      position: relative;
    }
  }

  .top {
    width: 100%;
    display: flex;
    border-bottom: 1px solid red;
    font-size: 14px;
    font-weight: 300;

    .top1 {
      width: 56%;
      display: flex;
      margin-left: 5px;
      align-items: center;

      .red2 {
        font-size: 18px;
        color: #ff3c39;
      }

      .green2 {
        font-size: 18px;
        color: rgb(9, 240, 9);
      }

      .yellow2 {
        font-size: 18px;
        color: yellow;
        padding-left: 5px;
      }

      li:nth-of-type(2) {
        width: 75px;
        margin-left: 10px;
      }
    }
  }

  .center {
    width: 100%;
    display: flex;
    // border-top: 1px solid red;
    font-size: 14px;

    .light {
      width: 49%;
      margin-right: 15px;

      .light1 {
        display: flex;
        margin-left: 5px;
        justify-content: space-between;
      }
    }

    .right {
      width: 49%;

      .right1 {
        display: flex;
        margin-right: 4px;
        justify-content: space-between;
      }
    }
  }

  .nav {
    width: 100%;
    // display: flex;

    .nav1 {
      display: flex;
      width: 100%;
      background-color: #504e4e;
      border-top: 1px solid #e40f0f;
      border-bottom: 1px solid rgb(237, 13, 13);

      li {
        margin-left: 5px;
        width: 100%;
        height: 20px;
        line-height: 20px;
        justify-content: space-evenly;
        font-size: 13px;
      }

      .nav3 {
        padding-left: 18px;
      }

      .li1 {
        margin-right: -64px;
      }
    }
  }

  .timestamp {}

  .timestamp:nth-of-type(1) {
    display: inline-block;
    width: 11px;
    text-align: right;
    margin-left: 6px;
  }

  .pricefall {
    color: rgb(6, 245, 6);
  }

  .volume {
    margin-right: 6px;
  }

  .item1 {
    width: 100%;
    height: calc(100% - 245px);
    overflow-y: hidden;

    .item2 {
      width: 100%;
      display: flex;
      justify-content: space-between;
    }
  }

  .bottom {
    position: absolute;
    width: 100%;
    height: 20px;
    // border-top: 1px solid #e61111;
    // border-bottom: 1px solid red;
    bottom: 0;
    display: flex;

    .rihgt-bottom {
      width: 40px;
      height: 100%;
      border-right: 1px solid #ff3c39;
      border-bottom: 1px solid #ff3c39;
      text-align: center;
      font-size: 11px;
    }

    .leight-bottom {
      flex: 1;
      border-top: 1px solid #ff3c39;
    }
  }

  .kLine-content {
    width: calc(100% - 250px);
    height: calc(100% - 4px);
    overflow: hidden;
    position: relative;
  }

  .contract-details {
    flex: 1;
    border-left: 1px solid #ff3c39;
    display: flex;
    color: #ffffff;
    flex-wrap: wrap;
    flex-direction: column;
    align-items: center;
    padding-top: 1px;
    // border-bottom: 1px solid red;
    // margin-bottom: 15px;
    position: relative;

    .item {
      position: relative;
      width: 100%;
      display: flex;
      flex-direction: row;
      flex-wrap: wrap;
      // padding-left: 14px;
      box-sizing: border-box;

      .yellow {
        color: yellow;
        // margin-left: 18%;
        padding-left: 28%;
        box-sizing: border-box;
      }

      .yellow1 {
        color: yellow;
        // margin-left: 18%;
        padding-left: 32%;
        box-sizing: border-box;
      }

      .green {
        color: green;
        margin-left: 29%;
        box-sizing: border-box;
      }

      .green1 {
        color: green;
        margin-left: 23%;
        box-sizing: border-box;
      }

      .green2 {
        color: green;
        margin-left: 23%;
        box-sizing: border-box;
      }

      .bai {
        color: #faf0f0;
        margin-left: 21%;
        box-sizing: border-box;
      }

      .red {
        color: red;
        margin-left: 29%;
        box-sizing: border-box;
      }

      &.item-name {
        line-height: 36px;
        font-weight: 600;
        font-size: 16px;
        margin-bottom: 8px;
      }

      &.item-price {
        margin-bottom: 6px;
        display: flex;
        justify-content: space-between;

        .label {
          color: #ffffff;
        }

        .pricerise {
          color: #ff3c39;
        }

        .pricefall {
          color: #00e700;
        }

        // .price {
        //   margin-left: 8px;
        // }
        .num {
          margin-right: 76px;
        }
      }

      &.mt2 {
        margin-top: 2px;
      }

      &.line-top {
        &::before {
          position: absolute;
          right: 0;
          top: 0;
          left: 0;
          width: 100%;
          height: 1px;
          content: "";
          -webkit-transform: scaleY(0.5);
          transform: scaleY(0.5);
          background-color: #ffffff;
        }
      }

      &.line-bottom {
        &::after {
          position: absolute;
          right: 0;
          bottom: 0;
          left: 0;
          width: 100%;
          height: 1px;
          content: "";
          -webkit-transform: scaleY(0.5);
          transform: scaleY(0.5);
          background-color: #ffffff;
        }
      }

      .item-list {
        flex: 1;
        // margin: 12px 0;
        line-height: 20px;
        font-size: 13px;
        overflow: hidden;
        box-sizing: border-box;
      }

      &.mingxi {
        height: calc(100 - 240px);
        margin-top: 2px;
        overflow: hidden;

        .grade-head {
          position: relative;
          width: 100%;
          line-height: 20px;

          .timestamp {
            display: inline-block;
            width: 30px;
            text-align: right;
          }

          .pricefall {
            display: inline-block;
            width: 40px;
            margin-left: 40px;
            color: #00e700;
          }

          .volume {
            display: inline-block;
            width: 40px;
            margin-left: 50px;
          }
        }
      }

      &.market-grade {
        margin-top: 2px;
        border-top: 1px solid #ff3c39;

        .grade-head {
          position: relative;
          width: 100%;
          line-height: 36px;
          display: flex;
          margin-bottom: 8px;

          span {
            flex: 1;
            // margin-left: 30px;
          }

          &::after {
            position: absolute;
            right: 0;
            bottom: 0;
            left: 0;
            width: 100%;
            height: 1px;
            content: "";
            -webkit-transform: scaleY(0.5);
            transform: scaleY(0.5);
            background-color: #ffffff;
          }
        }

        .grade-item {
          flex: 1;
          line-height: 26px;

          .pricerise {
            color: #ff3c39;
          }

          .pricefall {
            color: #00e700;
          }
        }
      }
    }
  }

  &.skin-light {
    background-color: #ffffff;

    .contract-details {
      color: #999999;

      .item {
        &.line-top::before {
          background-color: #333333;
        }

        &.line-bottom::after {
          background-color: #333333;
        }

        &.item-price {
          .label {
            color: #999999;
          }
        }

        &.market-grade {
          .grade-head::after {
            background-color: #333333;
          }
        }
      }
    }
  }
}
</style>
